<template>
	<view class="container">
		<view v-if="list.length === 0" class="empty-state">
			<view class="empty-icon">📝</view>
			<text class="empty-title">暂无上报记录</text>
			<text class="empty-desc">您还没有提交过任何问题报告</text>
		</view>

		<view v-else class="record-list">
			<view v-for="item in list" :key="item.id" class="record-card" @tap="goDetail(item.id)">
				<!-- 左侧状态指示器 -->
				<view class="status-indicator" :class="item.status"></view>
				
				<!-- 卡片内容 -->
				<view class="card-content">
					<view class="card-header">
						<text class="project-name">{{ item.projectName }}</text>
						<view class="status-badge" :class="item.status">
							<text class="status-text">{{ statusText(item.status) }}</text>
						</view>
					</view>
					
					<view class="card-body">
						<text class="description">{{ item.description }}</text>
					</view>
					
					<view class="card-footer">
						<view class="time-info">
							<text class="time-icon">🕒</text>
							<text class="time-text">{{ formatTime(item.createdAt) }}</text>
						</view>
						<view class="action-arrow">
							<text class="arrow">›</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { apiGetMyReportHistory } from '@/services/api.js'
import { isAuthed, getUser } from '@/utils/auth.js'

export default {
	data() {
		return {
			list: []
		}
	},
	onShow() {
		if (!isAuthed()) {
			uni.redirectTo({ url: '/pages/login/login' });
			return;
		}
		this.fetchList();
	},
	onPullDownRefresh() {
		this.fetchList().finally(() => {
			uni.stopPullDownRefresh();
		});
	},
	methods: {
		async fetchList() {
			try {
				// const res = await apiGetMyReportHistory(getUser().id);
				const res = await apiGetMyReportHistory(3);
				this.list = Array.isArray(res) ? res : (res?.data || []);
			} catch (e) {
				uni.showToast({ title: '加载失败', icon: 'none' });
			}
		},
		statusText(s) {
			const statusMap = {
				'pending': '待处理',
				'processing': '处理中', 
				'resolved': '已完成'
			};
			return statusMap[s] || s || '';
		},
		formatTime(timeStr) {
			if (!timeStr) return '';
			return timeStr.replace('T', ' ').split('.')[0];
		},
		goDetail(id) {
			uni.navigateTo({ url: `/pages/report/detail?id=${id}` });
		}
	}
}
</script>

<style>
.container {
	min-height: 100vh;
	background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
	padding: 30rpx;
}

/* 空状态 */
.empty-state {
	text-align: center;
	padding: 200rpx 40rpx;
	background: rgba(255, 255, 255, 0.8);
	border-radius: 24rpx;
	backdrop-filter: blur(10rpx);
	border: 1rpx solid rgba(255, 255, 255, 0.5);
}

.empty-icon {
	font-size: 120rpx;
	margin-bottom: 30rpx;
	display: block;
	opacity: 0.6;
}

.empty-title {
	display: block;
	font-size: 32rpx;
	font-weight: 600;
	color: #666;
	margin-bottom: 16rpx;
}

.empty-desc {
	display: block;
	font-size: 26rpx;
	color: #999;
}

/* 记录列表 */
.record-list {
	display: flex;
	flex-direction: column;
	gap: 24rpx;
}

/* 记录卡片 */
.record-card {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 20rpx;
	display: flex;
	position: relative;
	overflow: hidden;
	box-shadow: 
		0 4rpx 20rpx rgba(0, 0, 0, 0.08),
		0 1rpx 4rpx rgba(0, 0, 0, 0.04);
	border: 1rpx solid rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(10rpx);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.record-card:active {
	transform: translateY(2rpx) scale(0.998);
	box-shadow: 
		0 2rpx 12rpx rgba(0, 0, 0, 0.06),
		0 1rpx 2rpx rgba(0, 0, 0, 0.03);
}

/* 状态指示器 */
.status-indicator {
	width: 8rpx;
	background: linear-gradient(180deg, #ff6b6b, #ee5a52);
	transition: all 0.3s ease;
}

.status-indicator.pending {
	background: linear-gradient(180deg, #ffa726, #ff9800);
}

.status-indicator.processing {
	background: linear-gradient(180deg, #42a5f5, #2196f3);
}

.status-indicator.resolved {
	background: linear-gradient(180deg, #66bb6a, #4caf50);
}

/* 卡片内容 */
.card-content {
	flex: 1;
	padding: 32rpx;
	display: flex;
	flex-direction: column;
}

.card-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 20rpx;
}

.project-name {
	font-size: 32rpx;
	font-weight: 700;
	color: #2d3748;
	flex: 1;
	line-height: 1.3;
}

.status-badge {
	padding: 8rpx 20rpx;
	border-radius: 20rpx;
	font-size: 24rpx;
	font-weight: 600;
	margin-left: 20rpx;
	flex-shrink: 0;
	backdrop-filter: blur(10rpx);
	border: 1rpx solid;
}

.status-badge.pending {
	background: rgba(255, 167, 38, 0.12);
	color: #f57c00;
	border-color: rgba(245, 124, 0, 0.2);
}

.status-badge.processing {
	background: rgba(33, 150, 243, 0.12);
	color: #1976d2;
	border-color: rgba(25, 118, 210, 0.2);
}

.status-badge.resolved {
	background: rgba(76, 175, 80, 0.12);
	color: #388e3c;
	border-color: rgba(56, 142, 60, 0.2);
}

.status-text {
	font-size: 24rpx;
	font-weight: 600;
}

.card-body {
	margin-bottom: 24rpx;
	flex: 1;
}

.description {
	font-size: 28rpx;
	line-height: 1.5;
	color: #4a5568;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.card-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 20rpx;
	border-top: 1rpx solid rgba(0, 0, 0, 0.06);
}

.time-info {
	display: flex;
	align-items: center;
	color: #718096;
	font-size: 24rpx;
}

.time-icon {
	margin-right: 8rpx;
	font-size: 22rpx;
	opacity: 0.7;
}

.time-text {
	font-size: 24rpx;
	color: #718096;
}

.action-arrow .arrow {
	font-size: 36rpx;
	color: #cbd5e0;
	font-weight: bold;
	transition: transform 0.2s ease;
}

.record-card:active .action-arrow .arrow {
	transform: translateX(4rpx);
	color: #a0aec0;
}

/* 卡片悬停效果（在支持hover的设备上） */
@media (hover: hover) {
	.record-card:hover {
		transform: translateY(-2rpx);
		box-shadow: 
			0 8rpx 30rpx rgba(0, 0, 0, 0.12),
			0 2rpx 8rpx rgba(0, 0, 0, 0.06);
	}
}

/* 加载动画 */
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(20rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.record-card {
	animation: fadeIn 0.5s ease-out;
}

.record-card:nth-child(1) { animation-delay: 0.1s; }
.record-card:nth-child(2) { animation-delay: 0.2s; }
.record-card:nth-child(3) { animation-delay: 0.3s; }
.record-card:nth-child(4) { animation-delay: 0.4s; }
.record-card:nth-child(5) { animation-delay: 0.5s; }
</style>